<template>
  <div class="layer">
    {{ message }}
  </div>
</template>

<script>
  export default {
    name: 'Layer',
    props: {
      msg: String
    },
    data() {
      return {
        message: this.msg
      }
    },
    watch: {
      msg: {
        immediate: true,
        handler(val) {
          this.message = val
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .layer {
    position: absolute;
    @include center;
    padding: 0.2rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    font-size: 0.24rem;
    color: #fff;
    z-index: 9999;
  }
</style>
